<template>
  <div class="p-8 bg-gray-900 min-h-screen">
    <h1 class="text-2xl font-bold text-white mb-6">基础Tailwind测试</h1>
    
    <!-- 使用Tailwind内置颜色 -->
    <div class="mb-8">
      <h2 class="text-lg text-gray-300 mb-2">内置颜色测试：</h2>
      <div class="grid grid-cols-5 gap-4">
        <div class="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white">蓝色</div>
        <div class="w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center text-white">绿色</div>
        <div class="w-16 h-16 bg-red-500 rounded-lg flex items-center justify-center text-white">红色</div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg flex items-center justify-center text-white">黄色</div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg flex items-center justify-center text-white">紫色</div>
      </div>
    </div>
    
    <!-- 使用自定义颜色 -->
    <div>
      <h2 class="text-lg text-gray-300 mb-2">自定义颜色测试：</h2>
      <div class="grid grid-cols-5 gap-4">
        <div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center text-white">主色</div>
        <div class="w-16 h-16 bg-success rounded-lg flex items-center justify-center text-white">成功</div>
        <div class="w-16 h-16 bg-danger rounded-lg flex items-center justify-center text-white">危险</div>
        <div class="w-16 h-16 bg-warning rounded-lg flex items-center justify-center text-white">警告</div>
        <div class="w-16 h-16 bg-secondary rounded-lg flex items-center justify-center text-white">辅色</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>